<template>
    <div class="dice">
        <div class="dice-row">
            <span class="dots-hide"
                  :class="{'dots':currentNumber==2 ||currentNumber==3 ||currentNumber==4 ||currentNumber==5 ||currentNumber==6}"/>
            <span class="dots-hide"/>
            <span class="dots-hide"
                  :class="{'dots':currentNumber==4 ||currentNumber==5 ||currentNumber==6}"/>
        </div>
        <div class="dice-row">
            <span class="dots-hide" :class="{'dots':currentNumber==6}"/>
            <span class="dots-hide"
                  :class="{'dots':currentNumber==1 ||currentNumber==3 ||currentNumber==5}"/>
            <span class="dots-hide" :class="{'dots':currentNumber==6}"/>
        </div>
        <div class="dice-row">
                        <span class="dots-hide"
                              :class="{'dots':currentNumber==4 ||currentNumber==5 ||currentNumber==6}"/>
            <span class="dots-hide"/>
            <span class="dots-hide"
                  :class="{'dots':currentNumber==2 ||currentNumber==3 ||currentNumber==4 ||currentNumber==5 ||currentNumber==6}"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Dice",
        props: {currentNumber: Number},
        data() {
            return {

            }
        },
        methods: {},
    }
</script>

<style scoped>
    .dice {
        flex-direction:column;
        align-self: center;
        height: 60px;
        width: 60px;
        border-style: solid;
        border-width: 2px;
        border-radius: 5px;
        border-color: goldenrod;
        display: flex;
        background-color: #444444;
        justify-content: space-around;
    }

    .dice-row {
        flex-direction: row;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .dots-hide.dots {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background-color: goldenrod;
        align-self: center;
    }

    .dots-hide {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background-color: #444444;
        align-self: center;
    }

</style>